<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
<!-- <script src="./reactivity.global.js"></script> -->
<script src="./reactive.js"></script>
<script>
  // const { reactive, effect } = VueObserver;
  // reactive data 一样
  const data = {
    name: 'my name',
    age: '20',
    sex: 'nan'
  }
  const observerData = reactive(data);
  const lis = document.querySelectorAll('li');
  // effect 默认执行一次 => 页面 第一次渲染
  effect(() => {

    // get 取
    // 这个函数 触发 一个 get 
    // 哪些地方依赖了 name 属性
    lis[0].innerHTML = `${observerData.name}`;
    console.log('name effect', observerData.name)
  })
  effect(() => {
    // 哪些地方依赖了 age 属性
    lis[1].innerHTML = `${observerData.age}`;
    console.log('age effect', observerData.age)
  })
  effect(() => {
    // 哪些地方依赖了 sex 属性
    lis[2].innerHTML = `${observerData.sex}`;
    console.log('sex effect', observerData.sex)
  })
  // getter/setter
  setTimeout(() => {
    // age 产生变更
    // 自动找 age effect 执行? 怎么 主动 找到
    // 事件
    // 1: 把 所有依赖了 name age sex 的地方 统统收集起来
    // 检测 get 这个行为
    // 2: 
    // set
    // 修改 age 的时候 自动找到 依赖 age 的地方 再重新执行一遍
    // 修改 sex 的时候 自动找到 依赖 sex 的地方 再重新执行一遍
    observerData.age = 30;
    observerData.sex = 'nv';
  }, 5000)

  // let obj = { name: 'name' }

  // 代理 obj 高达 10 多种
  // let proxyObj = new Proxy(obj, {
  //   get(target, key, receiver) {
  //     console.log('get');
  //     let res = Reflect.get(target, key, receiver)
  //     return res;
  //   },
  //   set(target, key, value, receiver) {
  //     console.log('set', target, key, value, receiver);
  //     let res = Reflect.set(target, key, value, receiver)
  //     return res;
  //   },
  // })
  // proxyObj.name = 'name1'
  // console.log(proxyObj.name)
</script>